<template>
    <div class="box-view">
          <div class="title">基础信息</div>
            <el-divider></el-divider>
          <el-form ref="formName" label-width="110px">
                   <el-form-item v-for="(item,index) in columnList" :label="item.label+':'" :key="index" style="width:250px">
                        张三能否
                    </el-form-item>
                     <el-form-item  label="身份证:" style="width:400px">
                         <el-image 
                            style="width: 100px; height: 100px"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" 
                            :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                        </el-image>
                         <el-image 
                            style="width: 100px; height: 100px;margin-left:20px"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" 
                            :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                        </el-image>
                    </el-form-item>
                     <el-form-item  label="房产证:" style="width:400px">
                        <el-image 
                            style="width: 100px; height: 100px"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" 
                            :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                        </el-image>
                    </el-form-item>
                      <el-form-item  label="备注信息:" style="width:400px">
                        备注信息备注信息备注信息备注信息备注信息
                    </el-form-item>     
          </el-form>

             <div class="title">开户信息</div>
            <el-divider></el-divider>
              <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="户号"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="用能性质"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="操作"
                   />
            </el-table>
            <div class="title">业务办理信息</div>
            <el-divider></el-divider>
         <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="时间"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="所属专业"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="业务类型"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="户号"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="联系人"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="联系电话"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="备注"
                   />
            </el-table>
             <div class="title">用能信息</div>
            <el-divider></el-divider>
                   <div ref="init" style="width:100%;height:300px"></div>

    </div>
</template>
<script>
import * as echarts from 'echarts';

  export default {
    data() {
      return {
        columnList:[
          {label:'客户类别',prop:'name',iStrue:false},
          {label:'地址',prop:'name',iStrue:true},
          {label:'所属项目',prop:'name',iStrue:true},
          {label:'客户姓名',prop:'name',iStrue:true},
          {label:'客户性别',prop:'name',iStrue:true},
          {label:'供热面积',prop:'name',iStrue:true},
          {label:'联系电话',prop:'name',iStrue:true},
          {label:'身份证号',prop:'name',iStrue:true},
          {label:'户口人数',prop:'name',iStrue:true},
          {label:'银行账号',prop:'name',iStrue:true},
          {label:'开户银行',prop:'name',iStrue:true},
          {label:'开户行地址',prop:'name',iStrue:true},
          {label:'房产证号',prop:'name',iStrue:true}
        ], 
       tableData:[]
      };
    },
    methods: {

    },
      mounted() {
var chartDom = this.$refs.init
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);
  },
  }
</script>
<style scoped>
.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}
.title{
    padding-top:20px;
    color:#333;
    font-size:16px;
}
.el-divider--horizontal{
    margin:10px 0;
}
</style>